<template>
  <div>
    <label class="hamburger">
      <input type="checkbox" v-model="open" />
      <svg viewBox="0 0 32 32">
        <path
          class="line line-top-bottom"
          d="M27 10 13 10C10.8 10 9 8.2 9 6 9 3.5 10.8 2 13 2 15.2 2 17 3.8 17 6L17 26C17 28.2 18.8 30 21 30 23.2 30 25 28.2 25 26 25 23.8 23.2 22 21 22L7 22"
        ></path>
        <path class="line" d="M7 16 27 16"></path>
      </svg>
    </label>
    <a-drawer v-model:open="open" width="70%" placement="right" :closable="false">
      <div class="flex flex-col items-center gap-3 pb-5">
        <img
          src="../assets/images/about-banner.png"
          class="size-20 rounded-full"
          alt=""
          @click="goToProfile"
        />
        <p class="flex items-center gap-1">
          <span class="text-base font-bold">叽里咕噜</span>
          <img src="../assets/images/nan.png" class="size-4" alt="" />
        </p>
      </div>
      <nav>
        <ul class="flex flex-col gap-3">
          <router-link :to="nav.path" v-for="nav in navList" :key="nav.path">
            <li
              class="cursor-pointer h-10 text-lg px-3 leading-10 text-black rounded-md"
              :class="{ 'text-white': nav.path === route.path }"
              :style="{ background: nav.path === route.path ? hoverColor : '#f8f9fa' }"
              @click="open = false"
            >
              {{ nav.name }}
            </li>
          </router-link>
          <router-link to="/library" key="nav.path">
            <li
              class="cursor-pointer h-10 text-lg px-3 leading-10 text-black rounded-md"
              :class="{ 'text-white': '/library' === route.path }"
              :style="{ background: '/library' === route.path ? hoverColor : '#f8f9fa' }"
              @click="open = false"
            >
              圖書館
            </li>
          </router-link>
        </ul>
      </nav>
    </a-drawer>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { navList } from '@/utils/pageList'
const route = useRoute()
const router = useRouter()
const open = ref(false)

defineProps({
  color: {
    type: String,
    default: '#000',
  },
  hoverColor: {
    type: String,
    default: '#333',
  },
})

const goToProfile = () => {
  open.value = false
  router.push('/user-info')
}
</script>
<style>
.hamburger {
  display: flex;
  cursor: pointer;
}

.hamburger input {
  display: none;
}

.hamburger svg {
  height: 32px;
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hamburger:hover .line {
  stroke: v-bind('hoverColor');
}

.line {
  fill: none;
  stroke: v-bind('color');
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transition:
    stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line-top-bottom {
  stroke-dasharray: 12 63;
}

.hamburger input:checked + svg {
  transform: rotate(-45deg);
}

.hamburger input:checked + svg .line-top-bottom {
  stroke-dasharray: 20 300;
  stroke-dashoffset: -32.42;
}
</style>
